<template>
  <page-frame>
    <div class="healthTrend">
      <div class="toptitle">
        <div class="left">健康监测 - 健康数据</div>
        <div class="right">
          <div class="btns">
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>

      <el-row>
        <div class="personInfo">
          <div class="infoLeft">
            <el-row>
              <el-col :span="8">
                <el-row style="margin-top:6%;">
                  <el-col :span="6">
                    <img v-if="memberInfo.bigAvatar==''" src="../../res/images/default-80.jpg" alt="" style="border-radius: 50%;width:100%;height:100%;">
                    <img v-else :src="imgUrl" alt="" style="border-radius: 50%;width:100%;height:100%;">
                  </el-col>
                  <el-col :span="17" :offset="1">
                    <p style="margin-top:10px;margin-bottom:0;">
                      <span style="font-size:17px;">{{memberInfo.memberName}}</span>
                      <span>{{memberInfo.blName}} {{memberInfo.flName}} {{memberInfo.bedNo}}</span></p>
                    <p style ="margin:0;">
                      照护等级：<span>{{memberInfo.lid}}</span>
                    </p>
                    <p style ="margin:0;">
                      负责员工：<span>{{memberInfo.serverMember}}</span>
                    </p>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="10" :offset="2" v-show='false'>
                <el-row style="margin-bottom:10px;">
                  <el-button size="small" @click="deviceToggle(index,tab.id)" v-for="(tab,index) in deviceTabs" :class="{lightGreenBtn:deviceActive===index}">{{tab.name}}</el-button>
                </el-row>
                <el-row>
                  <el-col>
                    <span>设备名称：</span><span>isleep 睡眠仪 S200G</span>
                  </el-col>
                  <el-col>
                    <span>设备编号：</span><span>SN: 450038001551353333383238002</span>
                  </el-col>
                  <el-col>
                    <span>最近测量时间：</span><span>2017/09/17 13:48</span>
                  </el-col>
                  <el-col>
                    <span>设备绑定时间：</span><span>2017/09/17 13:48</span>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div class="infoRight">
            <div class="trapezoid">
              <div class="station">
                <p>{{memberInfo.blName}}</p>
                <p>{{memberInfo.orgName}}</p>
              </div>
            </div>
          </div>
        </div>
      </el-row>


      <!--<el-form ref="form" :model="form" label-width="80px">-->
        <!--<el-form-item label="会员姓名">-->
          <!--<el-col :span="8">-->
            <!--<el-input></el-input>-->
          <!--</el-col>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="监测设备">-->
          <!--<el-col :span="24">-->
            <!--<el-button @click="deviceToggle(index,tab.id)" v-for="(tab,index) in deviceTabs" :class="{lightGreenBtn:deviceActive===index}">{{tab.name}}</el-button>-->
          <!--</el-col>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="监测项目">-->
          <!--<el-col :span="24">-->
            <!--<el-button @click="itemToggle(index,tab.id)" v-for="(tab,index) in itemTabs" :class="{lightGreenBtn:itemActive===index}">{{tab.name}}</el-button>-->
          <!--</el-col>-->
        <!--</el-form-item>-->
      <!--</el-form>-->

      <div style="width:95%;margin:auto">
        <!-- =============== 日常检测 START =============== -->
        <div class="tab_box">
          <div class="row mt-lg mb-lg" id="tabTool">
            <div class="col col-md-7">
              <ul class="navTab row">
                <li @click="tabBloodPress" class="col" :class="deviceType=='1' ? 'active':''">血压</li>
                <li @click="tabBloodGlucose" class="col" :class="deviceType=='2' ? 'active':''">血糖</li>
                <li @click="tabEcg" class="col" :class="deviceType=='3' ? 'active':''">心电</li>
                <li class="col disabled" style="display:none;" :class="deviceType=='4' ? 'active':''">体重</li>
                <li @click="tabSleep" class="col" :class="deviceType=='5' ? 'active':''">睡眠</li>
                <li class="col disabled" style="display:none;" :class="deviceType=='6' ? 'active':''">运动</li>
              </ul>
            </div>
            <div class="col col-md-5 text-right">
              <form class="form-inline">
                <div class="control-group">
                  <div class="controls">
                    <el-date-picker
                      v-model="dateTime"
                      type="daterange"
                      @change="selectDateTime"
                      placeholder="选择日期范围">
                    </el-date-picker>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- =============== 血压管理 START =============== -->
          <div  class="tabsCon" v-show="deviceType=='1'">
            <div class="row">
              <div class="col-lg-4 col-sm-6">
                <!-- START widget-->
                <div class="panel widget bg-primary">
                  <div class="row row-table">
                    <div class="col-12 pv-lg text-center">
                      <div class="text-uppercase">累计检测次数</div>
                      <div class="h2 mt0" v-cloak>
                        {{bloodInfo.totleCount==undefined ||
                        bloodInfo.totleCount==0?'--':bloodInfo.totleCount}} <small>次</small>
                      </div>
                      <table width="100%" border="0" cellspacing="0"
                             cellpadding="0" class="h6">
                        <tr>
                          <td width="33%" height="24" align="center" valign="top">正常
                          </td>
                          <td width="33%" height="24" align="center" valign="top">轻度
                          </td>
                          <td width="33%" height="24" align="center" valign="top">
                            中重度</td>
                        </tr>
                        <tr>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.normalCount== undefined ||
                            bloodInfo.normalCount==0?'--':bloodInfo.normalCount}}</td>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.mildCount==undefined
                            ||bloodInfo.mildCount==0?'--':bloodInfo.mildCount}}</td>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.middleAndSeriousCount==undefined ||
                            bloodInfo.middleAndSeriousCount==0?'--':bloodInfo.middleAndSeriousCount}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-sm-6">
                <!-- START widget-->
                <div class="panel widget bg-purple">
                  <div class="row row-table">
                    <div class="col-12 pv-lg text-center">
                      <div class="text-uppercase">异常占比</div>
                      <div class="h2 mt0" v-cloak>
                        {{bloodInfo.abnormalPercent==
                        undefined||bloodInfo.abnormalPercent==0?'--':bloodInfo.abnormalPercent}}
                        <small>%</small>
                      </div>
                      <table width="100%" border="0" cellspacing="0"
                             cellpadding="0" class="h6">
                        <tr>
                          <td width="33%" height="24" align="center" valign="top">轻度
                          </td>
                          <td width="33%" height="24" align="center" valign="top">中度
                          </td>
                          <td width="33%" height="24" align="center" valign="top">重度
                          </td>
                        </tr>
                        <tr>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.mildPercent==undefined||bloodInfo.mildPercent==0?'--':bloodInfo.mildPercent}}%</td>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.middlePercent==undefined||bloodInfo.middlePercent==0?'--':bloodInfo.middlePercent}}%</td>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.seriousPercent==undefined||bloodInfo.seriousPercent==0?'--':bloodInfo.seriousPercent}}%</td>
                        </tr>
                      </table>

                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4 col-md-6 col-sm-12">
                <!-- START widget-->
                <div class="panel widget bg-green">
                  <div class="row row-table">
                    <div class="col-12 pv-lg text-center">
                      <div class="text-uppercase">平均血压</div>
                      <div class="h2 mt0" v-cloak>
                        {{bloodInfo.highAvg==undefined||bloodInfo.highAvg==0?'--':bloodInfo.highAvg}}/{{bloodInfo.lowAvg==undefined||bloodInfo.lowAvg==0?'--':bloodInfo.lowAvg}}
                        <small>mmHg</small>
                      </div>
                      <table width="100%" border="0" cellspacing="0"
                             cellpadding="0" class="h6">
                        <tr>
                          <td width="33%" height="24" align="center" valign="top"
                          >早</td>
                          <td width="33%" height="24" align="center" valign="top"
                          >中</td>
                          <td width="33%" height="24" align="center" valign="top"
                          >晚</td>
                        </tr>
                        <tr>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.morningHighAvg==undefined||bloodInfo.morningHighAvg==0?'--':bloodInfo.morningHighAvg}}/{{bloodInfo.morningLowAvg==undefined||bloodInfo.morningLowAvg==0?'--':bloodInfo.morningLowAvg}}
                          </td>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.noonHighAvg==undefined||bloodInfo.noonHighAvg==0?'--':bloodInfo.noonHighAvg}}/{{bloodInfo.noonLowAvg==undefined||bloodInfo.noonLowAvg==0?'--':bloodInfo.noonLowAvg}}</td>
                          <td width="33%" align="center" valign="top" v-cloak>
                            {{bloodInfo.nightHighAvg==undefined||bloodInfo.nightHighAvg==0?'--':bloodInfo.nightHighAvg}}/{{bloodInfo.nightLowAvg==undefined||bloodInfo.nightLowAvg==0?'--':bloodInfo.nightLowAvg}}</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="historyDate">
              <div class="pb-sm clearfix">
                <div class="icon_title_box pull-left">
                  <span class="iconfont icon-lishishuju font_22 mr-sm"></span>
                </div>
                <div class="icon_title_box pull-left">历史数据</div>
                <div class="pull-right">
                  <div class="btn-group btn-tabs">
                    <button type="button" class="btn btn-default" :class="RecordBox==true? 'active':''"  @click="RecordBox=true,panelChart4=false">记录</button>
                    <button type="button" class="btn btn-default" :class="panelChart4==true? 'active':''" @click="RecordBox=false,panelChart4=true">曲线</button>
                  </div>
                </div>
              </div>
              <div v-show="RecordBox" class="dateTabsCon">
                <div class="panel panel-default">
                  <!-- START table-responsive-->
                  <div class="table-responsive" v-if='bloodInfo.details.length>0'>
                    <table id="datatable1"
                           class="table table-bordered01 table-hover  font_12px text-center">
                      <thead>
                      <tr>
                        <td>日期</td>
                        <td>时间</td>
                        <td>分析</td>
                        <td>血压值</td>
                        <td>心率</td>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-for='item in bloodInfo.details'>
                        <td v-cloak>{{item.testTime |
                          formatDate('YYYY/MM/DD','')}}</td>
                        <td v-cloak>{{item.testTime |
                          formatDate('HH:mm:ss','')}}</td>
                        <td v-cloak><span :style="{color:resultColor(item.resultStateVal)}">{{item.resultShowStr}}</span></td>
                        <td v-cloak>{{item.highPressureValue}}/{{item.lowPressureValue}}mmHg</td>
                        <td v-cloak>{{item.pulseRateValue}} bpm</td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <!--<div v-show="loading" class="text-center"-->
                  <!--style="padding: 60px 0 100px 0;" v-cloak>-->
                  <!--<div class="sk-three-bounce">-->
                  <!--<div class="sk-child sk-bounce1"></div>-->
                  <!--<div class="sk-child sk-bounce2"></div>-->
                  <!--<div class="sk-child sk-bounce3"></div>-->
                  <!--</div>-->
                  <!--</div>-->
                  <div class="data_none" v-if='bloodInfo.details.length==0'>
                    <img src="../../res/images/data_none.gif"
                         width="100" height="100" alt="无数据">

                    <p class="mar_top_10">无血压记录！</p>
                  </div>
                  <!-- END table-responsive-->
                </div>
                <div class="panel-bottom"
                     v-if='total>1'>
                  <ul class="pagination">
                    <li class="paginate_button previous "
                        :class='{disabled:!hasPrevious}' id="datatable1_previous"><a
                      href="javascript:void(0);" v-on:click="previous"
                      aria-controls="datatable1" data-dt-idx="0" tabindex="0">上一页</a></li>

                    <li v-for='page in pages' class="paginate_button"
                        :class='{active:currentPage==page}'><a v-cloak
                                                               href="javascript:void(0);" aria-controls="datatable1"
                                                               data-dt-idx="1" tabindex="0" v-on:click="jumpPage(page)">{{page}}</a></li>

                    <li class="paginate_button next" id="datatable1_next"
                        :class='{disabled:!hasNext}'><a
                      href="javascript:void(0);"
                      aria-controls="datatable1"
                      data-dt-idx="7" v-on:click="next" tabindex="0">下一页</a></li>
                  </ul>
                </div>
              </div>
              <div v-show="panelChart4" class="dateTabsCon">
                <div class="panel panel-default">
                  <div class="data_none" v-if='bloodInfo.details.length==0'>
                    <img src="../../res/images/data_none.gif"
                         width="100" height="100" alt="无数据">

                    <p class="mar_top_10">无血压曲线！</p>
                  </div>
                  <div class="p-lg" v-show='bloodInfo.details.length>0'>
                    <div id="bloodPressure-history-chart"
                         style="height: 250px; width: 571px"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- =============== 血压管理 END =============== -->

          <!-- =============== 血糖管理 START =============== -->
          <div class="tabsCon" v-show="deviceType=='2'">
            <div class="panel panel-default pt-lg pb">
              <ul class="row" style="padding-left: 10px">
                <li class="col col-md-4 p-relative text-center">
                  <!--<div style="height: 140px; width: 177px;">-->
                  <!--<pie :pieChartOption="pieChartOption" :index="'first'"></pie>-->
                  <!--</div>-->
                  <div id="glucose-circle" style="height:140px;width: 177px"></div>
                  <div
                    style="position: absolute; top: 136px; left: 0; right: 0"
                    class="font_12 text-gray-dark text-center" v-cloak>
                    累计检测次数<span class="ml-sm mr-sm font_20">{{bloodGlucoseInfo.totalCount>0?bloodGlucoseInfo.totalCount:'--'}}</span>次
                  </div>
                </li>
                <li class="col col-md-4">
                  <div class="text-black mt-sm">平均血糖</div>
                  <div class="text-gray-light1 mt-sm">
                    <span class="font_24 text-black" v-cloak>{{bloodGlucoseInfo.average>0?bloodGlucoseInfo.average:'--'}}</span>
                    mmol/L
                  </div>
                  <div class="row mt-lg">
                    <div class="col col-sm-6 font_16 lh200 text-black">
                      <div class="text-black font_14">正常</div>
														<span v-cloak>{{bloodGlucoseInfo.normalCount>0?bloodGlucoseInfo.normalCount:'--'}}<br />
															<span style="color: #21ca8a">{{bloodGlucoseInfo.normalCountPercent>0?bloodGlucoseInfo.normalCountPercent:'--'}}</span>
                              <span class="text-gray-light1 font_12 ml-sm">%</span>
														</span>
                    </div>
                    <div class="col col-sm-6 font_16 lh200 text-black">
                      <div class="text-black font_14">偏高</div>
														<span v-cloak>{{bloodGlucoseInfo.highCount>0?bloodGlucoseInfo.highCount:'--'}}<br />
															<span style="color: #ed9947">{{bloodGlucoseInfo.highCountPercent>0?bloodGlucoseInfo.highCountPercent:'--'}}</span>
                              <span class="text-gray-light1 font_12 ml-sm">%</span>
														</span>
                    </div>
                  </div>
                </li>
                <li class="col col-md-4">
                  <div class="text-black mt-sm">
                    模拟糖化<a href="javascript:void(-1);" class="ml-sm"
                           data-toggle="tooltip"
                           data-original-title="系统根据测量值模拟推算出的糖化血红蛋白，由于检测设备及测量方法存在差异，模拟分析数值仅供参考"><i
                    class="fa fa-exclamation-circle text-primary"></i></a>
                  </div>
                  <div class="text-gray-light1 mt-sm">
                    <span class="font_24 text-black" v-cloak>{{bloodGlucoseInfo.average>0?bloodGlucoseInfo.HbAic:'--'}}</span>
                    %
                  </div>
                  <div class="row mt-lg">
                    <div class="col col-sm-6 font_16 lh200 text-black">
                      <div class="text-black font_14">高风险</div>
														<span v-cloak>{{bloodGlucoseInfo.dangerCount>0?bloodGlucoseInfo.dangerCount:'--'}}<br />
															<span style="color: #b45cd8">{{bloodGlucoseInfo.dangerCountPercent>0?bloodGlucoseInfo.dangerCountPercent:'--'}}</span>
                              <span class="text-gray-light1 font_12 ml-sm">%</span>
														</span>
                    </div>
                    <div class="col col-sm-6 font_16 lh200 text-black">
                      <div class="text-black font_14">偏低</div>
														<span v-cloak>{{bloodGlucoseInfo.lowCount>0?bloodGlucoseInfo.lowCount:'--'}}<br />
                              <span style="color: #ed5a47">{{bloodGlucoseInfo.lowCountPercent>0?bloodGlucoseInfo.lowCountPercent:'--'}}</span>
                              <span class="text-gray-light1 font_12 ml-sm">%</span>
                            </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--柱形图-->
            <div class="row">
              <div class="col-sm-8">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <div class="panel-title">
                      <span class=" font_12 text-black">平均值mmol/L</span>
                    </div>
                  </div>
                  <div class="panel-body">
                    <div id="average-blood-glucose" style="height: 200px; width: 360px;"></div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4" style="padding-left: 0">
                <div id="" class="panel panel-default">
                  <div class="panel-heading">
                    <div class="panel-title">
                      <span class=" font_12 text-black">血糖值mmol/L</span>
                    </div>
                  </div>
                  <div class="panel-body">
                    <div id="blood-glucose-mm" style="height: 200px; width: 164px;"></div>
                  </div>
                </div>
              </div>
            </div>
            <!--血糖历史数据-->
            <div class="historyDate">
              <div class="pb-sm clearfix">
                <div class="icon_title_box pull-left">
                  <span class="iconfont icon-lishishuju font_22 mr-sm"></span>
                </div>
                <div class="icon_title_box pull-left">历史数据</div>
                <div class="pull-right">
                  <div class="btn-group btn-tabs">
                    <button type="button" class="btn btn-default" :class="bloodSugarTable==true? 'active':''" @click="bloodSugarTable=true,bloodSugarRecord=false,bloodSugarCurve=false">表格</button>
                    <button type="button" class="btn btn-default" :class="bloodSugarRecord==true? 'active':''" @click="bloodSugarTable=false,bloodSugarRecord=true,bloodSugarCurve=false">记录</button>
                    <button type="button" class="btn btn-default" :class="bloodSugarCurve==true? 'active':''" @click="bloodSugarTable=false,bloodSugarRecord=false,bloodSugarCurve=true">曲线</button>
                  </div>
                </div>
              </div>
              <div class="dateTabsCon" v-show="bloodSugarTable">
                <!-- GLU doing -->
                <!-- START table-responsive-->
                <div class="table-responsive panel panel-default">
                  <table
                    class="table table-bordered01 table-hover  font_12px text-center"
                    v-cloak>
                    <thead>
                    <tr>
                      <td rowspan="2" width="16%">日期</td>
                      <td rowspan="2" width="12%"><span data-toggle="tooltip" data-original-title="00:00-03:59">凌晨</span></td>
                      <td colspan="2" width="20%"><span data-toggle="tooltip" data-original-title="04:00-10:29">早餐</span></td>
                      <td colspan="2" width="20%"><span data-toggle="tooltip" data-original-title="10:30-15:29">午餐</span></td>
                      <td colspan="2" width="20%"><span data-toggle="tooltip" data-original-title="15:30-20:29">晚餐</span></td>
                      <td rowspan="2" width="12%"><span data-toggle="tooltip" data-original-title="20:30-23:59">睡前</span></td>
                    </tr>
                    <tr>
                      <td width="10%">空腹</td>
                      <td width="10%">后</td>
                      <td width="10%">前</td>
                      <td width="10%">后</td>
                      <td width="10%">前</td>
                      <td width="10%">后</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="d in bloodGlucoseInfo.dailyList">
                      <td>{{d.date}}</td>
                      <td><span
                        :style="d.dailyGLUMap[1]?d.dailyGLUMap[1].statusColor:''">{{d.dailyGLUMap[1]?d.dailyGLUMap[1].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[2]?d.dailyGLUMap[2].statusColor:''">{{d.dailyGLUMap[2]?d.dailyGLUMap[2].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[3]?d.dailyGLUMap[3].statusColor:''">{{d.dailyGLUMap[3]?d.dailyGLUMap[3].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[4]?d.dailyGLUMap[4].statusColor:''">{{d.dailyGLUMap[4]?d.dailyGLUMap[4].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[5]?d.dailyGLUMap[5].statusColor:''">{{d.dailyGLUMap[5]?d.dailyGLUMap[5].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[6]?d.dailyGLUMap[6].statusColor:''">{{d.dailyGLUMap[6]?d.dailyGLUMap[6].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[7]?d.dailyGLUMap[7].statusColor:''">{{d.dailyGLUMap[7]?d.dailyGLUMap[7].value:''}}</span></td>
                      <td><span
                        :style="d.dailyGLUMap[8]?d.dailyGLUMap[8].statusColor:''">{{d.dailyGLUMap[8]?d.dailyGLUMap[8].value:''}}</span></td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <div class="data_none"
                     v-if="!(bloodGlucoseInfo && bloodGlucoseInfo.dailyList && bloodGlucoseInfo.dailyList.length>0)">
                  <img src="../../res/images/data_none.gif"
                       width="100" height="100" alt="无数据">
                  <p class="mar_top_10">Sorry，暂无数据！</p>
                </div>
                <div class="panel-bottom"
                     v-if='pageList().length>0&&total>1&&!loading'>
                  <ul class="pagination">
                    <li class="paginate_button previous"
                        :class='{disabled:!hasPrevious}' id="datatable1_previous">
                      <a href="javascript:void(0);" v-on:click="previous"
                         aria-controls="datatable1" data-dt-idx="0" tabindex="0">上一页</a>
                    </li>
                    <li v-for='page in pages' class="paginate_button"
                        :class='{active:currentPage==page}'><a v-cloak
                                                               href="javascript:void(0);" aria-controls="datatable1"
                                                               idx="1" tabindex="0" v-on:click="jumpPage(page)">{{page}}</a>
                    </li>
                    <li class="paginate_button next" id="datatable1_next"
                        :class='{disabled:!hasNext}'><a
                      href="javascript:void(0);" aria-controls="datatable1"
                      data-dt-idx="7" v-on:click="next" tabindex="0">下一页</a></li>
                  </ul>
                </div>
                <!-- END table-responsive-->

              </div>
              <div class="dateTabsCon" v-show="bloodSugarRecord">
                <!-- START table-responsive-->
                <div class="table-responsive panel panel-default">
                  <table v-if="record.totalCount>0"
                         class="table table-bordered01 table-hover  font_12px text-center">
                    <thead>
                    <tr>
                      <td>日期/时间</td>
                      <td>测量点</td>
                      <td>分析</td>
                      <td>血糖值</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in bloodGlucoseInfo.list">
                      <td>{{item.testTime}}</td>
                      <td>{{item.testPointName}}</td>
                      <td class="text-center"><div class="inline-block bc">
                        <i
                          class="iconfont icon-halfRing font_30 mr lh100 pull-left"
                          :style="{color: colorOfValue(item.valueState)}"></i><span
                        class="pull-left mt7 wd-xxxs text-left">{{item.valueStateName}}</span>
                      </div></td>
                      <td>{{item.value}} mmol/L</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="clearfix text-center" v-if="record.total>1">
                  <ul class="pagination mt0">
                    <li :class='{disabled:!hasPreviousInRecord}'
                        class="paginate_button previous" id="datatable1_previous"><a
                      href="javascript:void(0);" aria-controls="datatable1"
                      data-dt-idx="0" tabindex="0" v-on:click="previousInRecord">上一页</a></li>
                    <li v-for='page in pagesInRecord' class="paginate_button "
                        :class='{active:record.currentPage==page}'><a
                      href="javascript:void(0);" aria-controls="datatable1"
                      data-dt-idx="4" tabindex="0"
                      v-on:click="jumpPageInRecord(page)">{{page}}</a></li>
                    <li :class='{disabled:!hasNextInRecord}'
                        class="paginate_button next" id="datatable1_next"><a
                      href="javascript:void(0);" aria-controls="datatable1"
                      data-dt-idx="7" tabindex="0" v-on:click="nextInRecord">下一页</a></li>
                  </ul>
                </div>
                <div class="data_none" v-if="record.totalCount==0">
                  <img src="../../res/images/data_none.gif"
                       width="100" height="100" alt="无数据">
                  <p class="mar_top_10">暂无数据！</p>
                </div>
                <!-- END table-responsive-->

              </div>
              <div class="dateTabsCon" v-show="bloodSugarCurve">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <div>
                      <div class="serviceBox pt" id="filterBox">
                        <a v=1 @click="updateHistoryChart(0)"
                           class="label label-white mr3 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==0?'label-primary':''">凌晨</a>
                        <a v=2 @click="updateHistoryChart(1)"
                           class="label label-white mr3 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==1?'label-primary':''">空腹</a>
                        <a v=3 @click="updateHistoryChart(2)"
                           class="label label-white mr3 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==2?'label-primary':''">早餐后</a>
                        <a v=4 @click="updateHistoryChart(3)"
                           class="label label-white mr3 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==3?'label-primary':''">午餐前</a>
                        <a v=5 @click="updateHistoryChart(4)"
                           class="label label-white mr3 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==4?'label-primary':''">午餐后</a>
                        <a v=6 @click="updateHistoryChart(5)"
                           class="label label-white mr3 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==5?'label-primary':''">晚餐前</a>
                        <a v=7 @click="updateHistoryChart(6)"
                           class="label label-white mr2 mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==6?'label-primary':''">晚餐后</a>
                        <a v=8 @click="updateHistoryChart(7)"
                           class="label label-white mb-sm p pl-lg pr-lg inline-block"
                           :class="bloodSugarCurveIndex==7?'label-primary':''">睡前</a>

                      </div>


                    </div>
                  </div>
                  <div class="panel-body">
                    <div id="glucose-history-chart" :style="{display:chartDisplay?'block':'none'}"
                         style="height: 250px; width: 571px"></div>
                    <div class="data_none" v-if="!chartDisplay">
                      <img src="../../res/images/data_none.gif" width="100" height="100"
                           alt="无数据">
                      <p class="mar_top_10">暂无数据！</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- =============== 血糖管理 END =============== -->

          <!-- =============== 心电 START =============== -->
          <div class="tabsCon" v-show="deviceType=='3'">
            <div class="row mr0">
              <div class="col-md-4 pr0">
                <!-- START widget-->
                <div class="panel widget bg-blue">
                  <div class="row row-table">
                    <div class="col-xs-4 text-center pv-lg">
                      <em class="icon-layers font_36"></em>
                    </div>
                    <div class="col-xs-8 pt-lg pb-lg lh150">
                      <div class=" font_24" v-if="ecgData.count" v-cloak>
                        {{ecgData.count}}<span class="font_12">次</span>
                      </div>
                      <div class=" font_24" v-if="!ecgData.count">--<span class="font_12"></span></div>
                      <div class="text-uppercase">检测总次数</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4 pr0">
                <!-- START widget-->
                <div class="panel widget bg-red">
                  <div class="row row-table">
                    <div class="col-xs-4 text-center pv-lg">
                      <em class="icon-energy font_36"></em>
                    </div>
                    <div class="col-xs-8 pt-lg pb-lg lh150">
                      <div class=" font_24" v-if="ecgData.dangerCount" v-cloak>
                        {{ecgData.dangerCount}}<span class="font_12">次（{{ecgData.dangerPercentage}}%）</span>
                      </div>
                      <div class=" font_24" v-if="!ecgData.dangerCount">--<span class="font_12"></span></div>
                      <div class="text-uppercase">危急次数</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4 pr0">
                <!-- START widget-->
                <div class="panel widget bg-green1">
                  <div class="row row-table">
                    <div class="col-xs-4 text-center pv-lg">
                      <em class="icon-layers font_36"></em>
                    </div>
                    <div class="col-xs-8 pt-lg pb-lg lh150">
                      <div class=" font_24" v-if="ecgData.normalCount" v-cloak>
                        {{ecgData.normalCount}}<span class="font_12">次（{{ecgData.normalPercentage}}%）</span>
                      </div>
                      <div class=" font_24" v-if="!ecgData.normalCount">--<span class="font_12"></span></div>
                      <div class="text-uppercase">非危急次数</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pb-sm clearfix">
              <div class="icon_title_box pull-left">
                <span class="iconfont icon-lishishuju font_22 mr-sm"></span>
              </div>
              <div class="icon_title_box pull-left">心电检测记录</div>
              <div class="pull-right text-black" v-if="ecgData.waitDiagCount" v-cloak>
                待诊断<span class="font_24">{{ecgData.waitDiagCount}}</span>次
              </div>
            </div>
            <div class="panel panel-default mb">
              <table class="table">
                <tbody>
                <tr v-for='item in records' class="pointer" v-on:click="goDetail(item)">
                  <td width="24%" align="center">
                    <div class="pr" style="border-right:1px solid #e0e5e8;">
                      <div class="font_12 pt">
                        <i class="iconfont icon-xindian  fa-4x lh100" style="color:#dddddd" v-if="item.diagnoseStatus == '10'"></i>
                        <i class="iconfont icon-xindian  fa-4x lh100" style="color:#5d9cec" v-if="item.diagnoseStatus == '30' && item.doctorCode && item.resultType == '0'"></i>
                        <i class="iconfont icon-xindian  fa-4x lh100" style="color:#ed5a47" v-if="item.diagnoseStatus == '30' && item.doctorCode && item.resultType == '1'"></i>
                      </div>
                      <div style="color:#dddddd" v-if="item.diagnoseStatus == '10'">待诊断</div>
                      <div style="color:#ed5a47" v-if="item.diagnoseStatus == '30' && item.doctorCode && item.resultType == '1'">立即就医</div>
                      <div class="font_12 text-gray-light1 pt-sm" style="white-space:nowrap;" v-cloak>{{item.testTime | formatDate('YYYY/MM/DD HH:mm:ss','')}}</div>
                      <!--<div class="font_14 text-gray-light1 pt-sm lh200" v-cloak>{{item.ecgTypeInfo}}导心电图</div>-->
                    </div>
                  </td>
                  <td width="76%" style="vertical-align:top">
                    <div class="font_14" >
                      <div v-cloak><i class="fa fa-heart text-red"></i><span class="text-gray-light1 mr-xl ml-sm">心率值：{{item.heartRate}}次, ST段：{{item.stLevel}}, PR期间：{{item.pr}}, QT期间：{{item.qt}}, RR期间：{{item.rrInterval}}, P波幅度：{{item.pWave}}, R波幅度：{{item.rwave}}, T波幅度：{{item.twave}}, 波形质量：{{item.waveformQualityDesc}}, 心率症状：{{item.cardiacSymptomsDesc}}, 心率失常：{{item.isArhythmiaDesc}}, ST段是否正常：{{item.stTimeIsNormalDesc}}</span></div>
                    </div>
                    <!--<div class="text-center mt-xl pt-lg" v-if="item.diagnoseStatus == '10'"><button type="button" class="btn btn-primary btn-sm">立即诊断</button></div>-->
                    <!--<div class="font_12 text-black pt pb" v-if="item.diagnoseStatus == '10' && item.doctorName">已经诊断尚未发送结果给患者</div>-->
                    <!--<div class="font_14 text-black pt pb" v-if="item.diagnoseStatus == '30' && item.doctorDiagnose" style="max-width:400px;text-overflow:ellipsis;overflow:hidden;word-break:break-all;" v-cloak>诊断：{{item.doctorDiagnose}}</div>-->
                    <!--<div class="font_12 text-gray-light1" v-if="item.diagnoseStatus == '30' && item.doctorAdvice" style="max-width:400px;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;word-break:break-all;" v-cloak><span class="text-black">建议</span>：{{item.doctorAdvice}}</div>-->
                    <!--<div class="font_12 text-black pt pb" v-if="(item.diagnoseStatus == '30' && item.doctorName) || (item.diagnoseStatus == '10' && item.doctorName)" v-cloak>诊断医生：{{item.doctorName}} {{item.doctorDiagnoseTime | formatDate('YYYY/MM/DD HH:mm:ss','')}}</div>-->
                  </td>
                </tr>
                </tbody>
              </table>
              <!--<div v-show="loading" class="text-center"-->
                   <!--style="padding: 60px 0 100px 0;" v-cloak>-->
                <!--<div class="sk-three-bounce">-->
                  <!--<div class="sk-child sk-bounce1"></div>-->
                  <!--<div class="sk-child sk-bounce2"></div>-->
                  <!--<div class="sk-child sk-bounce3"></div>-->
                <!--</div>-->
              <!--</div>-->
              <div class="data_none" v-if='records.length==0&&!loading'>
                <img src="../../res/images/data_none.gif"
                     width="100" height="100" alt="无数据">

                <p class="mar_top_10">暂无心电记录！</p>
              </div>
            </div>
            <div class="clearfix text-right p mt3" v-if="records && records.length > 0" >
              <span class="pull-left mt-sm" v-cloak>共{{ecgData.count}}条检测记录</span>
              <ul class="pagination mt0">
                <li class="paginate_button previous " :class='{disabled:!hasPrevious}'>
                  <a href="javascript:void(0);" v-on:click="previous" data-dt-idx="0" tabindex="0">上一页</a>
                </li>
                <li v-for='page in pages' class="paginate_button" :class='{active:currentPage==page}'>
                  <a v-cloak href="javascript:void(0);" data-dt-idx="1" tabindex="0" v-on:click="jumpPage(page)">{{page}}</a>
                </li>
                <li class="paginate_button previous " :class='{disabled:!hasNext}'>
                  <a href="javascript:void(0);" v-on:click="next" data-dt-idx="7" tabindex="0">下一页</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- =============== 心电 END =============== -->

          <!-- =============== 体重 START =============== -->
          <div class="tabsCon" style="display: none">体重</div>
          <!-- =============== 体重 END =============== -->

          <!-- =============== 睡眠 START =============== -->
          <div class="tabsCon" v-show="deviceType=='5'">
            <div class="panel panel-default">
              <!-- START table-responsive-->
              <div class="table-responsive">
                <table class="table table-bordered01 text-center">
                  <tr>
                    <td colspan="2" rowspan="3" style="padding:0">
                      <div class="text-center">
                        <div id="isleepCircle" ref="evaluateChart" style="height:160px; width:240px;"></div>
                      </div>
                      <div class="font_12 text-left text-black">
                        <ul class="row  pl"><li class="col col-sm-6" v-cloak><i class="iconfont icon-circle mr-sm" style="color:#5d9cec"></i>理想（{{evaluateChartData['理想']}}）</li><li class="col col-sm-6" v-cloak><i class="iconfont icon-circle mr-sm" style="color:#23b7e5"></i>良好（{{evaluateChartData['良好']}}）</li></ul>
                        <ul class="row  pl"><li class="col col-sm-6" v-cloak><i class="iconfont icon-circle mr-sm" style="color:#21ca8a"></i>正常（{{evaluateChartData['正常']}}）</li><li class="col col-sm-6" v-cloak><i class="iconfont icon-circle mr-sm" style="color:#ee9f53"></i>欠佳（{{evaluateChartData['欠佳']}}）</li></ul>
                        <ul class="row  pl"><li class="col col-sm-6" v-cloak><i class="iconfont icon-circle mr-sm" style="color:#ed5a47"></i>较差（{{evaluateChartData['较差']}}）</li></ul>
                      </div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepTimePerDay != undefined" v-cloak>
                        <span v-if="statsAverageVO.sleepTimePerDay.hours != 0" v-cloak>{{statsAverageVO.sleepTimePerDay.hours}}<span class="font_12">时</span></span><span v-if="statsAverageVO.sleepTimePerDay.minutes != 0" v-cloak>{{statsAverageVO.sleepTimePerDay.minutes}}<span class="font_12">分</span></span>
                      </div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepTimePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均睡眠</div>
                    </td>
                    <td colspan="3" class="p-relative">
                      <div style="width:50%; border-right:1px solid #eee; position:absolute; top:0; left:0; bottom:0">
                        <div class="font_18 text-black" style="padding-top:15px;" v-if="statsAverageVO.sleepStartTimePerDay != undefined" v-cloak>
                          {{pad(statsAverageVO.sleepStartTimePerDay.hours, 2)}}:{{pad(statsAverageVO.sleepStartTimePerDay.minutes, 2)}}<span class="font_12">{{statsAverageVO.sleepStartTimePerDay.dayTimezone}}</span>
                        </div>
                        <div class="font_18 text-black" style="padding-top:15px;" v-if="statsAverageVO.sleepStartTimePerDay == undefined">--</div>
                        <div class="font_12 text-gray-light1">日均入睡</div>
                      </div>
                      <div style="width:50%;position:absolute; top:0; right:0; bottom:0">
                        <div class="font_18 text-black" style="padding-top:15px;" v-if="statsAverageVO.sleepEndTimePerDay != undefined" v-cloak>
                          {{pad(statsAverageVO.sleepEndTimePerDay.hours, 2)}}:{{pad(statsAverageVO.sleepEndTimePerDay.minutes, 2)}}<span class="font_12">{{statsAverageVO.sleepEndTimePerDay.dayTimezone}}</span>
                        </div>
                        <div class="font_18 text-black" style="padding-top:15px;" v-if="statsAverageVO.sleepEndTimePerDay == undefined">--</div>
                        <div class="font_12 text-gray-light1">日均醒来</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepEfficiencyPerDay != undefined" v-cloak>{{statsAverageVO.sleepEfficiencyPerDay}}%</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepEfficiencyPerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均睡眠效率</div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepSpeedPerDay != undefined">
                        <span v-if="statsAverageVO.sleepSpeedPerDay.hours != 0" v-cloak>{{statsAverageVO.sleepSpeedPerDay.hours}}:</span><span v-cloak>{{statsAverageVO.sleepSpeedPerDay.hours != 0 ? pad(statsAverageVO.sleepSpeedPerDay.minutes, 2) : statsAverageVO.sleepSpeedPerDay.minutes}}'</span>
                      </div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepSpeedPerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均入睡速度</div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepCoefficient != undefined" v-cloak>{{statsAverageVO.sleepCoefficient}}</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.sleepCoefficient == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均睡眠系数</div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.bodyMoveTimePerDay != undefined" v-cloak>{{statsAverageVO.bodyMoveTimePerDay}}次</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.bodyMoveTimePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均体动</div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.deepTimePerDay != undefined">
                        <span v-if="statsAverageVO.deepTimePerDay.hours != 0" v-cloak>{{statsAverageVO.deepTimePerDay.hours}}:</span><span v-cloak>{{statsAverageVO.deepTimePerDay.hours != 0 ? pad(statsAverageVO.deepTimePerDay.minutes, 2) : statsAverageVO.deepTimePerDay.minutes}}'</span>
                      </div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.deepTimePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均深睡</div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.moderateTimePerDay != undefined">
                        <span v-if="statsAverageVO.moderateTimePerDay.hours != 0" v-cloak>{{statsAverageVO.moderateTimePerDay.hours}}:</span><span v-cloak>{{statsAverageVO.moderateTimePerDay.hours != 0 ? pad(statsAverageVO.moderateTimePerDay.minutes, 2) : statsAverageVO.moderateTimePerDay.minutes}}'</span>
                      </div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.moderateTimePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均中睡</div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.lightTimePerDay != undefined">
                        <span v-if="statsAverageVO.lightTimePerDay.hours != 0" v-cloak>{{statsAverageVO.lightTimePerDay.hours}}:</span><span v-cloak>{{statsAverageVO.lightTimePerDay.hours != 0 ? pad(statsAverageVO.lightTimePerDay.minutes, 2) : statsAverageVO.lightTimePerDay.minutes}}'</span>
                      </div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.lightTimePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均浅睡</div>
                    </td>
                    <td>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.wakeTimePerDay != undefined">
                        <span v-if="statsAverageVO.wakeTimePerDay.hours != 0" v-cloak>{{statsAverageVO.wakeTimePerDay.hours}}:</span><span v-cloak>{{statsAverageVO.wakeTimePerDay.hours != 0 ? pad(statsAverageVO.wakeTimePerDay.minutes, 2) : statsAverageVO.wakeTimePerDay.minutes}}'</span>
                      </div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.wakeTimePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均觉醒</div>
                    </td>
                  </tr>
                  <tr>
                    <td width="20%">
                      <span class="font_12 text-gray-light1">共监测</span>
                      <span class="font_24 text-black" v-if="statsAverageVO.checkCount != undefined" v-cloak>{{statsAverageVO.checkCount}}</span><span v-if="statsAverageVO.checkCount != undefined" class="font_12 text-gray-light1">次</span>
                      <span class="font_24 text-black" v-if="statsAverageVO.checkCount == undefined" v-cloak>--</span><span v-if="statsAverageVO.checkCount == undefined" class="font_12 text-gray-light1">次</span>
                    </td>
                    <td width="20%">
                      <span class="font_12 text-gray-light1">平均</span>
                      <span class="font_24 text-black" v-if="statsAverageVO.checkAverageScore != undefined" v-cloak>{{statsAverageVO.checkAverageScore}}</span><span v-if="statsAverageVO.checkAverageScore != undefined" class="font_12 text-gray-light1">分</span>
                      <span class="font_24 text-black" v-if="statsAverageVO.checkAverageScore == undefined" v-cloak>--</span><span v-if="statsAverageVO.checkAverageScore == undefined" class="font_12 text-gray-light1">分</span>
                    </td>
                    <td width="15%">
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.deepPercentagePerDay != undefined" v-cloak>{{statsAverageVO.deepPercentagePerDay}}%</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.deepPercentagePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均深睡占比</div>
                    </td>
                    <td width="15%">
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.moderatePercentagePerDay != undefined" v-cloak>{{statsAverageVO.moderatePercentagePerDay}}%</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.moderatePercentagePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均中睡占比</div>
                    </td>
                    <td width="15%">
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.lightPercentagePerDay != undefined" v-cloak>{{statsAverageVO.lightPercentagePerDay}}%</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.lightPercentagePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均浅睡占比</div>
                    </td>
                    <td width="15%">
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.wakePercentagePerDay != undefined" v-cloak>{{statsAverageVO.wakePercentagePerDay}}%</div>
                      <div class="font_18 pt-sm text-black" v-if="statsAverageVO.wakePercentagePerDay == undefined">--</div>
                      <div class="font_12 text-gray-light1 pb-sm">日均觉醒占比</div>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div role="tabpanel">
              <!-- Nav tabs-->
              <ul role="tablist" class="nav nav-tabs sleepClass">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true"><span class="font_14 pl-xl pr-xl text-bold">检测记录</span></a>
                </li>
                <!-- <li role="presentation" class=""><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false"><span class="font_14  pl-xl pr-xl text-bold">睡眠报告</span></a>
                </li> -->
              </ul>
              <!-- Tab panes-->
              <div class="tab-content p0 sleepChart">
                <div id="home" role="tabpanel" class="tab-pane active">
                  <div class="historyDate">
                    <div class="p clearfix">
                      <div class="pull-right">
                        <div class="btn-group btn-tabs">
                          <button type="button" class="btn btn-default" :class="checkRecord ? 'active':''" @click="showCheckRecord">记录</button>
                          <button type="button" class="btn btn-default" :class="checkRecordChart ? 'active':''" @click="showRecordChart()">曲线</button>
                        </div>
                      </div>
                    </div>
                    <div class="dateTabsCon" v-if="checkRecord">
                      <!-- START table-responsive-->
                      <div class="bb">
                        <table class="table" v-if="sleepRecords && sleepRecords.length" >
                          <tbody>
                          <tr v-for='item in sleepRecords' class="pointer" v-on:click="goSleepDetail(item)">
                            <td width="16%" align="center" style="position:relative;">
                              <div style="width:50px; height:50px; margin:5px auto" v-if="item.evaluateDesc == '理想'" key="veryGood">
                                <input class="circleVeryGood" type="text" v-model="item.evaluateValue" data-width="100%" data-displayInput="true" data-fgColor="#5d9cec" data-bgColor="#dde6e9" data-thickness="0.1" data-readOnly="true">
                              </div>
                              <div style="width:50px; height:50px; margin:5px auto" v-else-if="item.evaluateDesc == '良好'" key="good">
                                <input class="circleGood" type="text" v-model="item.evaluateValue" data-width="100%" data-displayInput="true" data-fgColor="#23b7e5" data-thickness="0.1" data-readOnly="true">
                              </div>
                              <div style="width:50px; height:50px; margin:5px auto" v-else-if="item.evaluateDesc == '正常'" key="normal">
                                <input class="circleNormal" type="text" v-model="item.evaluateValue" data-width="100%" data-displayInput="true" data-fgColor="#21ca8a" data-thickness="0.1" data-readOnly="true">
                              </div>
                              <div style="width:50px; height:50px; margin:5px auto" v-else-if="item.evaluateDesc == '欠佳'" key="warm">
                                <input class="circleWarn" type="text" v-model="item.evaluateValue" data-width="100%" data-displayInput="true" data-fgColor="#ff902b" data-thickness="0.1" data-readOnly="true">
                              </div>
                              <div style="width:50px; height:50px; margin:5px auto" v-else-if="item.evaluateDesc == '较差'" key="bad">
                                <input class="circleBad" type="text" v-model="item.evaluateValue" data-width="100%" data-displayInput="true" data-fgColor="#f05050" data-thickness="0.1" data-readOnly="true">
                              </div>
                              <span class="labelVeryGood" v-if="item.evaluateDesc == '理想'" v-cloak>{{item.evaluateDesc}}</span>
                              <span class="labelGood" v-if="item.evaluateDesc == '良好'" v-cloak>{{item.evaluateDesc}}</span>
                              <span class="labelNormal" v-if="item.evaluateDesc == '正常'" v-cloak>{{item.evaluateDesc}}</span>
                              <span class="labelWarn" v-if="item.evaluateDesc == '欠佳'" v-cloak>{{item.evaluateDesc}}</span>
                              <span class="labelBad" v-if="item.evaluateDesc == '较差'" v-cloak>{{item.evaluateDesc}}</span>
                              <div class="font_12 text-gray-light1 pt-sm lh100">{{item.sleepTime | formatDate('YYYY-MM-DD','')}}</div>
                            </td>
                            <td width="24%">
                              <div class="font_12 lh240 mt mb pl-lg" style="border-left:1px solid #e0e5e8;">
                                <div>
                                  <span class="text-gray-light1">时长：</span>
                                  <span class="text-black" v-cloak>{{item.sleepTotalTime && item.sleepTotalTime.hours}}:{{item.sleepTotalTime && pad(item.sleepTotalTime.minutes, 2)}}'</span>
                                </div>
                                <div>
                                  <span class="text-gray-light1">入睡：</span>
                                  <span class="text-black" v-cloak>{{item.sleepStartTime && pad(item.sleepStartTime.hours, 2)}}:{{item.sleepStartTime && pad(item.sleepStartTime.minutes, 2)}}{{item.sleepStartTime && item.sleepStartTime.dayTimezone}}</span>
                                </div>
                                <div>
                                  <span class="text-gray-light1">醒来：</span>
                                  <span class="text-black" v-cloak>{{item.sleepEndTime && pad(item.sleepEndTime.hours, 2)}}:{{item.sleepEndTime && pad(item.sleepEndTime.minutes, 2)}}{{item.sleepEndTime && item.sleepEndTime.dayTimezone}}</span>
                                </div>
                              </div>
                            </td>
                            <td width="31%">
                              <div class="font_12 lh240 pt pb">
                                <ul class="row p0"  style="border-left:1px solid #e0e5e8; border-right:1px solid #e0e5e8; margin-bottom:0">
                                  <li class="col col-sm-6 p0 pl-lg">
                                    <div>
                                      <span class="text-gray-light1">深睡：</span>
                                      <span class="text-black" v-cloak>{{item.deepTime && item.deepTime.hours}}:{{item.deepTime && pad(item.deepTime.minutes, 2)}}'</span>
                                    </div>
                                    <div>
                                      <span class="text-gray-light1">中睡：</span>
                                      <span class="text-black" v-cloak>{{item.moderateTime && item.moderateTime.hours}}:{{item.moderateTime && pad(item.moderateTime.minutes, 2)}}'</span>
                                    </div>
                                    <div>
                                      <span class="text-gray-light1">浅睡：</span>
                                      <span class="text-black" v-cloak>{{item.lightTime && item.lightTime.hours}}:{{item.lightTime && pad(item.lightTime.minutes, 2)}}'</span>
                                    </div>
                                  </li>
                                  <li class="col col-sm-6 p0 pl-lg">
                                    <div>
                                      <span class="text-gray-light1">觉醒：</span>
                                      <span class="text-black" v-cloak>{{item.wakeTime && item.wakeTime.hours}}:{{item.wakeTime && pad(item.wakeTime.minutes, 2)}}'</span>
                                    </div>
                                    <div>
                                      <span class="text-gray-light1">体动：</span>
                                      <span class="text-black" v-cloak>{{item.bodyMovementTimes}}次</span>
                                    </div>
                                  </li>
                                </ul>
                              </div>

                            </td>
                            <td width="29%">
                              <div class="font_12 lh240 pt pb pl-lg">
                                <div><span class="text-gray-light1">温度：</span><span class="text-black" v-cloak>{{item.temperature}} ℃</span></div>
                                <div><span class="text-gray-light1">湿度：</span><span class="text-black" v-cloak>{{item.humidity}}%</span></div>
                                <div><span class="text-gray-light1">上传：</span><span class="text-black" v-cloak>{{item.uploadTime | formatDate('YYYY-MM-DD HH:mm','')}}</span></div>
                              </div>
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                      <div class="clearfix text-right p mt3" v-if="sleepRecords && sleepRecords.length" >
                        <span class="pull-left mt-sm" v-cloak>共{{sleepData.records && sleepData.records.length}}条监测记录</span>
                        <ul class="pagination mt0">
                          <li class="paginate_button previous " :class='{disabled:!hasPrevious}'>
                            <a href="javascript:void(0);" v-on:click="previous" data-dt-idx="0" tabindex="0">上一页</a>
                          </li>
                          <li v-for='page in pages' class="paginate_button" :class='{active:currentPage==page}'>
                            <a v-cloak href="javascript:void(0);" data-dt-idx="1" tabindex="0" v-on:click="jumpPage(page)">{{page}}</a>
                          </li>
                          <li class="paginate_button previous " :class='{disabled:!hasNext}'>
                            <a href="javascript:void(0);" v-on:click="next" data-dt-idx="7" tabindex="0">下一页</a>
                          </li>
                        </ul>
                      </div>
                      <!--<div v-show="loading" class="text-center" style="padding: 60px 0 100px 0;" v-cloak>-->
                        <!--<div class="sk-three-bounce">-->
                          <!--<div class="sk-child sk-bounce1"></div>-->
                          <!--<div class="sk-child sk-bounce2"></div>-->
                          <!--<div class="sk-child sk-bounce3"></div>-->
                        <!--</div>-->
                      <!--</div>-->
                      <div class="data_none" v-if="(sleepRecords == undefined || sleepRecords.length == 0)">
                        <img src="../../res/images/data_none.gif" width="100" height="100" alt="无数据">
                        <p class="mar_top_10">暂无睡眠记录！</p>
                      </div>
                      <!-- END table-responsive-->
                    </div>
                    <div class="dateTabsCon" v-if="checkRecordChart">
                      <div class="pl-lg" style="display:none">
                        <div class="btn-group">
                          <button type="button" class="btn btn-default btn-primary sleepChartTab">日</button>
                          <button type="button" class="btn btn-default sleepChartTab">周</button>
                          <button type="button" class="btn btn-default sleepChartTab">月</button>
                        </div>
                      </div>
                      <div class="sleepChartContent" v-show="sleepRecords && sleepRecords.length > 0">
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡眠质量趋势分析</div>
                          <div id="sleep-Scope-Chart" class="flot-chart" style="width:100%">

                          </div>
                        </div>
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡眠趋势分析</div>
                          <div id="sleep-Deep-Chart"  class="flot-chart" style="width:100%">

                          </div>
                        </div>
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡觉时间趋势分析</div>
                          <div id="sleep-Time-Chart"  class="flot-chart" style="width:100%">

                          </div>
                        </div>
                      </div>
                      <div class="sleepChartContent" style="display:none">
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡眠质量趋势分析</div>
                          <div ref="sleepScopeWeekChart" id="sleepScopeWeekChart" class="flot-chart" style="width:100%">

                          </div>
                        </div>
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡眠趋势分析</div>
                          <div ref="sleepDeepWeekChart" class="flot-chart" style="width:100%">

                          </div>
                        </div>
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡觉时间趋势分析</div>
                          <div ref="sleepTimeWeekChart" class="flot-chart" style="width:100%">

                          </div>
                        </div>
                      </div>
                      <div class="sleepChartContent" style="display:none">
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡眠质量趋势分析</div>
                          <div ref="sleepScopeMonthChart" id="sleepScopeMonthChart" class="flot-chart" style="width:100%">

                          </div>
                        </div>
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡眠趋势分析</div>
                          <div ref="sleepDeepMonthChart" id="sleepDeepMonthChart"  class="flot-chart" style="width:100%">

                          </div>
                        </div>
                        <div class="panel-body">
                          <div class="pl-sm text-bold">睡觉时间趋势分析</div>
                          <div ref="sleepTimeMonthChart" class="flot-chart" style="width:100%">

                          </div>
                        </div>
                      </div>
                      <div class="bb" v-show="sleepRecords == undefined || sleepRecords.length == 0">
                      </div>
                      <div class="data_none" v-show="sleepRecords == undefined || sleepRecords.length == 0">
                        <img src="../../res/images/data_none.gif" width="100" height="100" alt="无数据">
                        <p class="mar_top_10">暂无睡眠曲线！</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- =============== 睡眠 END =============== -->

          <!-- =============== 运动 START =============== -->
          <div class="tabsCon" style="display: none">运动</div>
          <!-- =============== 运动 END =============== -->

        </div>

        <!-- =============== 右边栏 START =============== -->
        <div class="rightVisit">

          <div class="panel panel-default" id="contact">

            <div class="panel-body">
              <div class="clearfix">
                <div class="icon_title_box pull-left">
                  <span class="fa fa-headphones text-gray font_18 mar_right_10"></span>回访
                </div>

              </div>
              <div class="clearfix">
                <div class="icon_btn_round"
                     data-target="#myModalPhone"
                     style="cursor: pointer;" data-toggle="tooltip" title="电话">
                  <span class="fa fa-phone text-green"></span>
                </div>
                <div class="icon_btn_round"
                     style="cursor: pointer;"  title="咨询">
									<span class="iconfont icon-liaotiantubiao"
                        :class="{'':true,'text-primary':true}"></span>
                        <!--:class="{'':imData,'text-primary':imData1}"></span>-->
                </div>
                <div class="icon_btn_round sendSMS"
                     style="cursor: pointer;"
                     data-target="#SMSModal" data-toggle="tooltip" title="短信指导">
                  <span class=" iconfont icon-duanxintubiao text-purple"></span>
                </div>
                <div class="icon_btn_round"
                     style="cursor: pointer;"  title="微信指导">
									<span class="fa fa-weixin"
                        :class="{'text-green-weixi':true}"></span>
                        <!--:class="{'text-green-weixi':weChatEnable}"></span>-->
                </div>
              </div>
              <div class="clearfix row font_12 line_h_26" v-show="true">
                <div class="col-sm-9" v-cloak>使用者电话：15800000000</div>
                <div class="col-sm-3 text-right text-gray2">
									<span class="icon-phone mar_right_30" @click="showPhone()"
                        data-target="#myModalPhone"
                        style="cursor: pointer;"></span> <span
                  class="iconfont icon-duanxintubiao"></span>
                </div>
                <div class="col-sm-9" v-cloak>紧急联系人电话：15800000000</div>
                <div class="col-sm-3 text-right text-gray2">
									<span class="icon-phone mar_right_30" @click="showLinkPhone()"
                        data-target="#myModalPhone"
                        style="cursor: pointer;"></span> <span
                  class="iconfont icon-duanxintubiao"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- =============== 右边栏 END =============== -->
      </div>

    </div>
  </page-frame>
</template>

<script>
  import {CONSTANT_MONITOR_DEVICE_OPTION} from '../../config/constant';
  import {CONSTANT_MONITOR_ITEM_OPTION} from '../../config/constant';
  import healthMonitorApi from '../../service/healthManagement/healthMonitorApi';
  import $ from 'jquery';

  export default{
    data(){
      return {
        imgUrl:'',
        currentMemberId:null,
        currentCertNo:'',
        memberInfo:{
          "memberId": null,
          "memberNo": "",
          "memberName": "",
          "cardno": "",
          "gender": null,
          "age": null,
          "phone": "",
          "lid": "",
          "dateCheckin": "",
          "urgentContactName": "",
          "urgentPhone": "",
          "type": 0,
          "bedNo": "",
          "blName": "",
          "flName": "",
          "rmName": "",
          "serverMember": ""
        },
        sleepRecords:[],
        sleepData : {},
        form:{},
        deviceActive:0,
        itemActive:0,
        deviceTabs:CONSTANT_MONITOR_DEVICE_OPTION,
        itemTabs:CONSTANT_MONITOR_ITEM_OPTION,

        deviceType:'1',
        bloodCondition:{
          "certNo": "",
          "endTime": "",
          "memberId": null,
          "startTime": ""
        },
        bloodSugarCondition: {
          "certNo": "",
          "endTime": "",
          "memberId": null,
          "startTime": ""
        },
        phrEcgCondition: {
          "certNo": "",
          "endTime": "",
          "memberId": null,
          "startTime": ""
        },
        sleepCondition:{
          "certNo": "",
          "deviceType": "",
          "endTime": "",
          "memberId": null,
          "startTime": ""
        },
        bloodInfo:{
          details:[],
          totleCount:0,
          normalCount:0,
          mildCount:0,
          seriousCount:0,
          abnormalPercent:0,
          mildPercent:0,
          middlePercent:0,
          seriousPercent:0,
          highAvg:0,
          morningHighAvg:0,
          noonHighAvg:0,
          nightHighAvg:0,
        },
        RecordBox:true,
        panelChart4:false,

        bloodGlucoseInfo:{
          totalCount:0,
          average:0,
          normalCount:0,
          normalCountPercent:0,
          highCount:0,
          highCountPercent:0,
          dangerCount:0,
          dangerCountPercent:0,
          lowCount:0,
          lowCountPercent:0,
        },
        bloodSugarTable:true,
        bloodSugarRecord:false,
        bloodSugarCurve:false,
        bloodSugarCurveIndex:null,
        loading:false,
        total:0,
        currentPage:1,
        record:{
          totalCount:0,
          total:0,
          currentPage:1,
          offset:0,

        },
        chartDisplay:false,
        ecgData:{
          waitDiagCount:0,
        },
        records:[],
        evaluateChartData: {},
        statsAverageVO : {},
        pagesInRecord:[],

        dateTime:[moment().add(-7, 'day').format(),moment().format()],
        checkRecord:true,
        checkRecordChart:false,

        optionBloodPressure:{
          color: ['#f05050','#2bbae6'],
          legend: {
            right:'0',
            top:'0',
            itemBackgroundColor: '#2bbae6',
            data:['高压','低压']
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            show:false,
            left: '15px',
            right: '25px;',
            bottom: '10px',
            top:'35px',
            containLabel: true,
          },
          xAxis:  [{
            type: 'category',
            boundaryGap: false,
            offset : 10,
            nameLocation:'middle',
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine:{
              show: false
            },
            axisLabel:{
              textStyle:{
                color: '#666',
                fontSize: 8
              }
            },
            data: ['2017/10/10 12:00:00','2017/10/10 12:10:00','2017/10/10 12:20:00'].map(function (str) {
              return str.replace(' ', '\n')
            })
          }],
          yAxis: [{
            axisTick:{
              show: false
            },
            axisLine: {
              show: false
            },

            splitLine:{
              show: true,
              lineStyle: {
                color: '#e0e0e0',
                width: 0.5
              }
            },
            axisLabel:{
              show: true,
              textStyle:{
                color: '#666',
                baseline:'center',
                fontSize: 10
              }
            },
            type: 'value',
          }],
          series: [
            {
              name:'高压',
              type:'line',
              stack: '高压',
              smooth: true,
              data:[],
            },
            {
              name:'低压',
              type:'line',
              data:[],
            }
          ]
        },
        optionPie: {
          color: ['#21ca8a','#ed9947','#ed5a47','#b45cd8'],
          series: [
            {
              name:'次数',
              type:'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
//                {value:2, name:'2次'},
//                {value:1, name:'0次'},
//                {value:4, name:'4次'},
//                {value:1, name:'0次'}
              ]
            }
          ]
        },
        optionAverage: {
          color: ['#5d9cec'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            show:false,
            left: '5px',
            right: '10px;',
            bottom: '10px',
            top:'10px',
            containLabel: true,
          },
          xAxis : [ {
            type : 'category',
            data : ['空腹', '餐前', '餐后', '睡前', '凌晨'],
            axisLine: {
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine:{
              show: false
            },
            axisLabel:{
              textStyle:{
                color: '#666',
                fontSize: 8
              }
            }
          }
          ],
          yAxis : [
            {
              boundaryGap: ['0', '2%'],
              axisTick:{
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine:{
                show: true,
                lineStyle: {
                  color: '#e0e0e0',
                  width: 0.5
                }
              },
              axisLabel:{
                show: true,
                textStyle:{
                  color: '#666',
                  baseline:'center',
                  fontSize: 10
                }
              },
              type : 'value'
            }
          ],
          series : [ {
            name:'',
            type:'bar',
            barWidth: '40%',
            data:[]
          }
          ]
        },
        optionMM: {
          color: ['#5d9cec'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            show:false,
            left: '5px',
            right: '10px;',
            bottom: '10px',
            top:'10px',
            containLabel: true,
          },
          xAxis : [
            {
              type : 'category',
              data : ['最高值', '最低值'],
              axisLine: {
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine:{
                show: false
              },
              axisLabel:{
                textStyle:{
                  color: '#666',
                  fontSize: 8
                }
              }
            }
          ],
          yAxis : [
            {
              boundaryGap: ['0', '2%'],
              axisTick:{
                show: false
              },
              axisLine: {
                show: false
              },

              splitLine:{
                show: true,
                lineStyle: {
                  color: '#e0e0e0',
                  width: 0.5
                }
              },
              axisLabel:{
                show: true,
                textStyle:{
                  color: '#666',
                  baseline:'center',
                  fontSize: 10
                }
              },
              type : 'value'
            }
          ],
          series : [
            {
              name:'',
              type:'bar',
              barWidth: '40%',
              data:[]
            }
          ]
        },
        optionHistory: {
          color: ['#f05050'],
          tooltip : {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            show:false,
            left: '15px',
            right: '25px;',
            bottom: '10px',
            top:'10px',
            containLabel: true,
          },
          xAxis : [
            {
              type : 'time',
              offset : 10,
              axisLine: {
                show: false
              },
              axisTick:{
                show: false
              },
              splitLine:{
                show: false
              },
              axisLabel:{
                textStyle:{
                  color: '#666',
                  fontSize: 8
                }
              }
            }
          ],
          yAxis : [
            {
              boundaryGap: ['0', '2%'],
              axisTick:{
                show: false
              },
              axisLine: {
                show: false
              },

              splitLine:{
                show: true,
                lineStyle: {
                  color: '#e0e0e0',
                  width: 0.5
                }
              },
              axisLabel:{
                show: true,
                textStyle:{
                  color: '#666',
                  baseline:'center',
                  fontSize: 10
                }
              },
              type : 'value'
            }
          ],
          series : [
            {
              name:'',
              type:'line',
              smooth: true,
              stack: '血糖值',
              data:[]
            }
          ]
        },
        optionSleep: {
          tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            position:function(x,y){
              return [x+5, y];
            },
            textStyle:{
              fontSize:8
            }
          },
          calculable : true,
          series : [
            {
              name:'睡眠评价',
              type:'pie',
              radius : '55%',
              center: ['50%', '60%'],
              itemStyle:{
                normal:{
                  label:{
                    show:false
                  },
                  labelLine:{
                    show:false
                  }
                }
              },
              data:[
//                {value:2, name:'理想'},
//                {value:1, name:'良好'},
//                {value:4, name:'正常'},
//                {value:1, name:'欠佳'},
//                {value:5, name:'较差'}
              ]
            }
          ],
          color:['#5d9cec', '#23b7e5', '#21ca8a', '#ff902b', '#f05050']
        },
        optionSleepCurve:{
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            data:['睡眠评分']
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
//              data : data.x
              data : []
            }
          ],
          yAxis : [
            {
              type : 'value'
            }
          ],
          series : [
            {
              name:'评分',
              type:'line',
              smooth:true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
//              data:data.y
              data:[]
            }
          ]
        },
      }
    },
    components: {

    },
    methods:{
      init(){
        this.currentMemberId = this.$route.params.memberId;
        this.currentCertNo = this.$route.params.certNo;
        this.loadMemberInfo();
        this.getBloodInfo();
      },
      loadMemberInfo(){
        let self = this;
        healthMonitorApi.getMemberInfo(self.currentMemberId).then(
          (res)=>{
            self.memberInfo = res.data.data;
            if(self.memberInfo.bigAvatar==''){

            }else{
              self.imgUrl = self.memberInfo.bigAvatar;
            }
          }
        );
      },
      selectDateTime(){
        if(this.deviceType=='1'){//blood press
          this.getBloodInfo();
        }else if(this.deviceType=='2'){//blood sugar
          this.getBloodGlucoseInfo();
        }else if(this.deviceType=='3'){//heart Ecg
          this.getEcgData();
        }else if(this.deviceType=='5'){//sleep
          this.getSleepData();
        }
      },
      //右侧 --开始
      showPhone(){},
      showLinkPhone(){},

      //右侧 --结束

      back(){
        this.$router.push({name:'healthMonitor'});
      },

      //device tab switch
      deviceToggle(index,id){
        this.deviceActive = index;
      },

      //item tab switch
      itemToggle(index,id){
        this.itemActive = index;
      },

      //-------------------------memberService.js SATRT-------------------------------//
      //function from memberService.js

      GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
          return unescape(r[2]);
        return null;
      },

      GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
          return unescape(r[2]);
        return null;
      },

      tabBloodPress() {
        this.deviceType = '1';
        this.getBloodInfo();
      },
      getBloodInfo() {
        this.loading = true;
        var self = this;
        self.bloodCondition.certNo = self.currentCertNo;
        self.bloodCondition.memberId = self.currentMemberId;
        self.bloodCondition.endTime =moment(self.dateTime[1]).format();
        self.bloodCondition.startTime =moment(self.dateTime[0]).format();
        self.optionBloodPressure.xAxis[0].data = [];
        healthMonitorApi.getBloodInfo(self.bloodCondition).then(
          (response)=>{
            self.bloodInfo = response.body.data;
            for(var value of self.bloodInfo.details){
              self.optionBloodPressure.series[0].data.push(value.highPressureValue);
              self.optionBloodPressure.series[1].data.push(value.lowPressureValue);
              self.optionBloodPressure.xAxis[0].data.push(value.testTime);
            }
            self.initBloodChart();
          },
          (response)=>{

          }
        );
        this.clearPage();
      },
      clearPage() {// 清除分页参数
        this.currentPage = 1;// 页码
        this.total = 0;// 页数
        this.totalCount = 0;// 总条数
      },
      initBloodChart(){
        var echarts = require('echarts');
        var bloodChart = echarts.init(document.getElementById('bloodPressure-history-chart'));
        bloodChart.setOption(this.optionBloodPressure);
      },
      initBloodGlucoseChart() {
        var echarts = require('echarts');
        var glucoseCircle = echarts.init(document.getElementById('glucose-circle'));
        glucoseCircle.setOption(this.optionPie);

        var averageChart = echarts.init(document.getElementById('average-blood-glucose'));
        averageChart.setOption(this.optionAverage);

        var minAndMaxChart = echarts.init(document.getElementById('blood-glucose-mm'));
        minAndMaxChart.setOption(this.optionMM);

        var glucoseHistory = echarts.init(document.getElementById('glucose-history-chart'));
        glucoseHistory.setOption(this.optionHistory);

      },
      tabBloodGlucose() {
        this.deviceType = '2';
        this.getBloodGlucoseInfo();
      },
      getBloodGlucoseInfo() {
        var _self = this;
        _self.loading = true;
        _self.bloodSugarCondition.certNo = _self.currentCertNo;
        _self.bloodSugarCondition.memberId = _self.currentMemberId;
        _self.bloodSugarCondition.endTime = moment(_self.dateTime[1]).format();
        _self.bloodSugarCondition.startTime = moment(_self.dateTime[0]).format();
        healthMonitorApi.getBloodSugar(_self.bloodSugarCondition).then(
          (response)=>{
            _self.bloodGlucoseInfo = response.body.data;
            _self.record.totalCount = _self.bloodGlucoseInfo.list.length;
            _self.totalCount = _self.bloodGlucoseInfo.dailyList.length;
            _self.initBloodGlucosePage(_self.totalCount);
            _self.initBloodGlucosePageInRecord(_self.record.totalCount);
            _self.loading = false;
            //累计监测饼图
            var normal = _self.bloodGlucoseInfo.normalCount;
            var high = _self.bloodGlucoseInfo.highCount;
            var danger = _self.bloodGlucoseInfo.dangerCount;
            var low = _self.bloodGlucoseInfo.lowCount;
            let arr= [
              {value:normal,name:'正常'+normal+'次'},
              {value:high,name:'偏高'+high+'次'},
              {value:low,name:'偏低'+low+'次'},
              {value:danger,name:'高风险'+danger+'次'}
            ]
            _self.optionPie.series[0].data=arr;

            //平均值
            _self.optionAverage.series[0].data.push(_self.bloodGlucoseInfo.avgBefBreakfast);
            _self.optionAverage.series[0].data.push(_self.bloodGlucoseInfo.avgBefMeal);
            _self.optionAverage.series[0].data.push(_self.bloodGlucoseInfo.avgAftMeal);
            _self.optionAverage.series[0].data.push(_self.bloodGlucoseInfo.avgEvening);
            _self.optionAverage.series[0].data.push(_self.bloodGlucoseInfo.avgEarlyMorning);
            //血糖值
            _self.optionMM.series[0].data.push(_self.bloodGlucoseInfo.maxValue);
            _self.optionMM.series[0].data.push(_self.bloodGlucoseInfo.minValue);
            _self.initBloodGlucoseChart();
            //历史数据 表格
        _self.pageListGlucose();
          },
          (response)=>{

          }
        );
      },

      tabEcg(){
        this.deviceType = '3';
        this.getEcgData();
      },
      //心电
      getEcgData(){
        var _self = this;
        _self.loading = true;
        _self.phrEcgCondition.certNo = _self.currentCertNo;
        _self.phrEcgCondition.memberId = _self.currentMemberId;
        _self.phrEcgCondition.endTime =moment(_self.dateTime[1]).format();
        _self.phrEcgCondition.startTime =moment(_self.dateTime[0]).format();

        healthMonitorApi.getPhrEcg(_self.phrEcgCondition).then(
          (response)=>{
            _self.ecgData = response.body.data;
            _self.records = _self.ecgData.details.slice(0, 10);
            _self.total = Math.ceil(_self.ecgData.details.length / 10);
          },
          (response)=>{

          }
        );
      },
      clearList() {
        this.records.splice(0,this.records.length);
      },
      tabSleep(){
        this.deviceType = '5';
        this.getSleepData();
      },
      getSleepData(){
        var _self = this;
        _self.checkRecord = true;
        _self.clearList();
        _self.loading = true;
        _self.sleepCondition.certNo = _self.currentCertNo;
        _self.sleepCondition.deviceType = 1;
        _self.sleepCondition.memberId = _self.currentMemberId;
        _self.sleepCondition.endTime =moment(_self.dateTime[1]).format();
        _self.sleepCondition.startTime =moment(_self.dateTime[0]).format();
        healthMonitorApi.getSleep(_self.sleepCondition).then(
          (response)=>{
              //睡眠均值
              _self.sleepData = response.data.data;
              _self.statsAverageVO = _self.sleepData['statsAverageVO'] || {};
              //饼图
              let chartData = response.data.data.evaluateValueChartData;
              _self.initSleepPie(chartData);
              //记录
              _self.sleepRecords = response.data.data.records;
              _self.initEvaluateImage();
          }
        );
        setTimeout(function(){

        },1000);
      },
      goSleepDetail(){

      },
      initSleepPie(data){
        if (data == "") data = "{}";
        data = JSON.parse(data);
        this.evaluateChartData = data;
        for(var p in data){
          this.optionSleep.series[0].data.push({
            name:p,
            value:data[p]
          });
        }
        var echarts = require('echarts');
        var sleepCircle = echarts.init(document.getElementById('isleepCircle'));
        sleepCircle.setOption(this.optionSleep);
      },
      pageListGlucose(){// 当前页数据
        var list = [];
        if (this.total > 0 && this.bloodGlucoseInfo.dailyList != undefined) {
          var items = this.bloodGlucoseInfo.dailyList;
          var current = this.currentPage - 1;// 当前页的索引
          var count = this.totalCount;// 总条数
          var pageCount = this.offset;// 每页条数
          var temp = count - pageCount * current;
          var size = temp / pageCount >= 1 ? pageCount : temp % pageCount;
          var start = current * pageCount;
          for (var i = start; i < start + size; i++) {
            list.push(items[i]);
          }
        }
        return list;
      },
      pageList(){// 当前页数据
        var list = [];

        if (this.total > 0
          && this.allList != undefined) {
          var items = this.allList;

          var current = this.currentPage - 1;// 当前页的索引
          var count = this.allCount;// 总条数
          var pageCount = this.offset;// 每页条数
          var temp = count - pageCount * current;
          var size = temp / pageCount >= 1 ? pageCount : temp
          % pageCount;
          var start = current * pageCount;
          for (var i = start; i < start + size; i++) {
            list.push(items[i]);
          }
        }
        return list;
      },
      updateHistoryChart(index) {
        this.bloodSugarCurveIndex=index;
        var echarts = require('echarts');
        var glucoseHistory = echarts.init(document.getElementById('glucose-history-chart'));
        let data = [];
        if (this.bloodGlucoseInfo != undefined && this.bloodGlucoseInfo.timeList != undefined) {
          var list = this.bloodGlucoseInfo.timeList[index];
          var length = list.length;
          for (var i=0;i<length;i++) {
            var dto = list[i];
            data.push([dto.testTime,dto.value]);
          }
        }
        this.chartDisplay = data.length > 0;
        if (this.chartDisplay) {
          this.optionHistory.series[0].data = data;
          glucoseHistory.setOption(this.optionHistory);
        }
      },
      pageListInRecord() {// 当前页数据
        var list = [];

        if (this.record.total > 0 && this.bloodGlucoseInfo.list != undefined) {
          var items = this.bloodGlucoseInfo.list;

          var current = this.record.currentPage - 1;// 当前页的索引
          var count = this.record.totalCount;// 总条数
          var pageCount = this.record.offset;// 每页条数
          var temp = count - pageCount * current;
          var size = temp / pageCount >= 1 ? pageCount : temp % pageCount;
          var start = current * pageCount;
          for (var i = start; i < start + size; i++) {
            list.push(items[i]);
          }
        }
        return list;
      },
      hasPreviousInRecord() {
        return this.record.currentPage > 1;
      },
      previousInRecord() {
        if (this.hasPreviousInRecord) {
          this.record.currentPage = this.record.currentPage - 1;
        }
      },
      hasNextInRecord() {
        return this.record.currentPage < this.record.total;
      },
      nextInRecord() {
        if (this.hasNextInRecord) {
          this.record.currentPage = this.record.currentPage + 1;
        }
      },
      showRecordChart(){
        this.checkRecord = false;
        this.checkRecordChart = true;
        this.createChart(0);
      },
      showCheckRecord(){
        this.checkRecord = true;
        this.checkRecordChart = false;
        this.initEvaluateImage();
      },
      resultColor(code) {
        var color = '';
        // #4b92e9 血压偏低
        // #44cb6a 正常血压
        // #e9d657 正常高值血压
        // #e99857 轻度高血压
        // #e96b57 中度高血压
        // #e9579c 重度高血压
        if (code == '0') {
          color = '#4b92e9';
        } else if (code == '1') {
          color = '#44cb6a';
        } else if (code == '2') {
          color = '#e9d657';
        } else if (code == '3') {
          color = '#e99857';
        } else if (code == '4') {
          color = '#e96b57';
        } else if (code == '5') {
          color = '#e9579c';
        }
        return color;
      },
      colorOfValue(state) {
        // #ffbc2b 偏高
        // #5d9cec 正常
        // #f05050 偏低
        // #b45cd8 高风险
        var color = '';
        if (state == 'NORMAL') {
          color = '#21ca8a';
        } else if (state == 'HIGH') {
          color = '#ed9947';
        } else if (state == 'DANGEROUS') {
          color = '#b45cd8';
        } else if (state == 'LOW') {
          color = '#ed5a47';
        }
        return color;
      },
      goDetail(data){
        this.$router.push({name:'ecgDiagnose',params:{id:data.phrRecordId}});
      },
      initBloodGlucosePage(totalCount) {
        this.total = Math.ceil(totalCount / this.offset);// 页数
      },
      initBloodGlucosePageInRecord(totalCount) {
        this.record.total = Math.ceil(totalCount / this.record.offset);// 页数
      },
      previous(){
        if (this.hasPrevious) {
          this.currentPage = this.currentPage - 1;
        }
      },
      next() {
        if (this.hasNext) {
          this.currentPage = this.currentPage + 1;
        }
      },
      hasPrevious() {
        return this.currentPage > 1;
      },
      hasNext() {
        return this.currentPage < this.total;
      },
      pages() {
        var pages = [];
        if (this.total != 0) {
          if (this.total > 6 && this.currentPage > 4) {// 当前页码不小于5
            var diff = this.total - this.currentPage;
            diff = diff > 2 ? 2 : diff;
            var start = diff - 5;
            for (var i = start; i < diff + 1; i++) {// 生成当前选中页码和前3个页码
              pages.push(this.currentPage + i);
            }
          } else {// 总页数不大于6页 或 当前页不大于5
            var size = this.total > 6 ? 6 : this.total;
            for (var i = 1; i <= size; i++) {
              pages.push(i);
            }
          }
        }

        return pages;
      },
      pad(num, n) {
        if(num==''||num==undefined){
          return 0;
        }else {
          num = num + '';
          var len = num.length;
          while(len < n) {
            num = "0" + num;
            len++;
          }
          return num;
        }
      },
      createChart(tabIndex){
        var me = this;
        setTimeout(function(){
          if(tabIndex == 0){
            var sleepScopeChartData = null;
            var sleepDeepChartData = null;
            var sleepTimeChartData = null;
            if(me.sleepData['sleepScopeChartData']){
              sleepScopeChartData = JSON.parse(me.sleepData['sleepScopeChartData']);
            }
            if(me.sleepData['sleepDeepChartData']){
              sleepDeepChartData = JSON.parse(me.sleepData['sleepDeepChartData']);
            }
            if(me.sleepData['sleepTimeChartData']){
              sleepTimeChartData = JSON.parse(me.sleepData['sleepTimeChartData']);
            }
            if(sleepScopeChartData && sleepScopeChartData.x && sleepScopeChartData.x.length > 0){
              me.initScopeChart('sleep-Scope-Chart', sleepScopeChartData);
            }else{

            }
            if(sleepDeepChartData && sleepDeepChartData.x && sleepDeepChartData.x.length > 0){
              me.sleepDeepChart('sleep-Deep-Chart', sleepDeepChartData);
            }else{

            }
            if(sleepTimeChartData && sleepTimeChartData.x && sleepTimeChartData.x.length > 0){
              me.sleepTimeChart('sleep-Time-Chart', sleepTimeChartData);
            }else{

            }
          }else if(tabIndex == 1){
            var sleepScopeWeekChart = me.$refs.sleepScopeWeekChart;
            var sleepDeepWeekChart = me.$refs.sleepDeepWeekChart;
            var sleepTimeWeekChart = me.$refs.sleepTimeWeekChart;
            var sleepScopeWeekChartData = null;
            var sleepDeepWeekChartData = null;
            var sleepTimeWeekChartData = null;
            if(me.sleepData['sleepScopeWeekChartData']){
              sleepScopeWeekChartData = JSON.parse(me.sleepData['sleepScopeWeekChartData']);
            }
            if(me.sleepData['sleepDeepWeekChartData']){
              sleepDeepWeekChartData = JSON.parse(me.sleepData['sleepDeepWeekChartData']);
            }
            if(me.sleepData['sleepTimeWeekChartData']){
              sleepTimeWeekChartData = JSON.parse(me.sleepData['sleepTimeWeekChartData']);
            }
            if(sleepScopeWeekChartData && sleepScopeWeekChartData.x && sleepScopeWeekChartData.x.length > 0){
              me.initScopeChart('sleepScopeWeekChart', sleepScopeWeekChartData);
            }else{

            }
            if(sleepDeepWeekChartData && sleepDeepWeekChartData.x && sleepDeepWeekChartData.x.length > 0){
              me.sleepDeepChart(sleepDeepWeekChart, sleepDeepWeekChartData);
            }else{

            }
            if(sleepTimeWeekChartData && sleepTimeWeekChartData.x && sleepTimeWeekChartData.x.length > 0){
              me.sleepTimeChart('sleepTimeWeekChart', sleepTimeWeekChartData);
            }else{

            }
          }else if(tabIndex == 2){
            var sleepScopeMonthChart = me.$refs.sleepScopeMonthChart;
            var sleepDeepMonthChart = me.$refs.sleepDeepMonthChart;
            var sleepTimeMonthChart = me.$refs.sleepTimeMonthChart;
            var sleepScopeMonthChartData = null;
            var sleepDeepMonthChartData = null;
            var sleepTimeMonthChartData = null;
            if(me.sleepData['sleepScopeMonthChartData']){
              sleepScopeMonthChartData = JSON.parse(me.sleepData['sleepScopeMonthChartData']);
            }
            if(me.sleepData['sleepDeepMonthChartData']){
              sleepDeepMonthChartData = JSON.parse(me.sleepData['sleepDeepMonthChartData']);
            }
            if(me.sleepData['sleepTimeMonthChartData']){
              sleepTimeMonthChartData = JSON.parse(me.sleepData['sleepTimeMonthChartData']);
            }
            if(sleepScopeMonthChartData && sleepScopeMonthChartData.x && sleepScopeMonthChartData.x.length > 0){
              me.sleepScopeMonth = true;
              me.initScopeChart('sleepScopeMonthChart', sleepScopeMonthChartData);
            }else{

            }
            if(sleepDeepMonthChartData && sleepDeepMonthChartData.x && sleepDeepMonthChartData.x.length > 0){

              me.sleepDeepChart(sleepDeepMonthChart, sleepDeepMonthChartData);
            }else{

            }
            if(sleepTimeMonthChartData && sleepTimeMonthChartData.x && sleepTimeMonthChartData.x.length > 0){
              me.sleepTimeChart('sleepTimeMonthChart', sleepTimeMonthChartData);
            }else{

            }
          }
        });
      },
      initScopeChart (chart, data){
        var echarts = require('echarts');
        if(data) {
          if(chart=='sleep-Scope-Chart'){
            var charts = echarts.init(document.getElementById('sleep-Scope-Chart'));
          }else if(chart=='sleepScopeWeekChart'){
            var charts = echarts.init(document.getElementById('sleepScopeWeekChart'));
          }else if(chart=='sleepScopeMonthChart'){
            var charts = echarts.init(document.getElementById('sleepScopeMonthChart'));
          }
          this.optionSleepCurve.xAxis[0].data = data.x;
          this.optionSleepCurve.series[0].data = data.y;
          charts.setOption(this.optionSleepCurve);
        }
      },
      sleepDeepChart(chart, data){
        var echarts = require('echarts');
        var me = this;
        if(data) {
          if(chart=='sleep-Deep-Chart'){
            var charts = echarts.init(document.getElementById('sleep-Deep-Chart'));
          }

          var option = {
            tooltip : {
              trigger: 'axis',
              formatter: function(params, ticket, callback){
                if(params){
                  var name = "";
                  var tip = [];
                  if(params[0]){
                    name = params[0].name;
                    tip.push('<br>');
                    tip.push(params[0].seriesName + "：" + me.formatTimeChartTip2(params[0].value));
                  }
                  if(params[1]){
                    name = params[1].name;
                    tip.push('<br>');
                    tip.push(params[1].seriesName + "：" + me.formatTimeChartTip2(params[1].value));
                  }
                  if(params[2]){
                    name = params[2].name;
                    tip.push('<br>');
                    tip.push(params[2].seriesName + "：" + me.formatTimeChartTip2(params[2].value));
                  }
                  if(params[3]){
                    name = params[3].name;
                    tip.push('<br>');
                    tip.push(params[3].seriesName + "：" + me.formatTimeChartTip2(params[3].value));
                  }
                  if(params[4]){
                    name = params[4].name;
                    tip.push('<br>');
                    tip.push(params[4].seriesName + "：" + me.formatTimeChartTip2(params[4].value));
                  }
                  if(name){
                    name = [name];
                    tip = name.concat(tip);
                    return tip.join('');
                  }else{
                    return '';
                  }
                }else{
                  return '';
                }
              }
            },
            legend: {
              y:'bottom',
              data:['睡眠时长','深睡时长','中睡时长','浅睡时长','觉醒时长']
            },
            calculable : true,
            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                data : data.x
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'睡眠时长',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y1
              },
              {
                name:'深睡时长',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y2
              },
              {
                name:'中睡时长',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y3
              },
              {
                name:'浅睡时长',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y4
              },
              {
                name:'觉醒时长',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y5
              }
            ]
          };
          charts.setOption(option);
        }
      },
      sleepTimeChart(chart, data){
        var echarts = require('echarts');
        var me = this;
        if(data) {
          if(chart=='sleep-Time-Chart'){
            var charts = echarts.init(document.getElementById('sleep-Time-Chart'));
          }

          var option = {
            tooltip : {
              trigger: 'axis',
              formatter: function(params, ticket, callback){
                if(params){
                  var name = "";
                  var tip = [];
                  if(params[0]){
                    name = params[0].name;
                    tip.push('<br>');
                    tip.push(params[0].seriesName + "：" + me.formatTime(data.y3[params[0].dataIndex]));
                  }
                  if(params[1]){
                    name = params[1].name;
                    tip.push('<br>');
                    tip.push(params[1].seriesName + "：" + me.formatTime(data.y4[params[0].dataIndex]));
                  }
                  if(name){
                    name = [name];
                    tip = name.concat(tip);
                    return tip.join('');
                  }else{
                    return '';
                  }
                }else{
                  return '';
                }
              }
            },
            legend: {
              y:'bottom',
              data:['睡觉时间','睡醒时间']
            },
            calculable : true,
            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                data : data.x
              }
            ],
            yAxis : [
              {
                type : 'value'
              }
            ],
            series : [
              {
                name:'睡觉时间',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y1
              },
              {
                name:'睡醒时间',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:data.y2
              }
            ]
          };
          charts.setOption(option);
        }
      },
      initEvaluateImage(){
        setTimeout(function(){
          $('.circleVeryGood').knob();
          $('.circleGood').knob();
          $('.circleNormal').knob();
          $('.circleWarn').knob();
          $('.circleBad').knob();
        });
      },
      formatTime(time){
        var date = new Date(time);
        return this.pad(date.getHours(), 2) + ':' + this.pad(date.getMinutes(), 2);
      },
      //-----------------------------THE END-----------------------------------//


    },
    filters:{
      formatDate:function(value, formatString, defaultString) {
        if (value == undefined || value == '') {
          return defaultString;
        } else {
          formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
          try {
            return moment(value).format(formatString);
          } catch (err) {
            return defaultString;
          }
        }
      },
    },
    mounted:function(){
      this.init();
    },

  }
</script>

<style>
  @media screen and (min-width:1367px){
    .healthTrend .tab_box{
      width:50%;
    }
    .healthTrend .rightVisit{
      float: left;
      width: 30%;
      margin-left: 100px;
    }
  }
  @media screen and (max-width:1366px){
    .healthTrend .tab_box{
      width:57%;
    }
    .healthTrend .rightVisit{
      float: left;
      width: 32%;
      margin-left: 100px;
    }
  }
  .healthTrend .tab_box{
    float:left;
  }
  .healthTrend .rightVisit .panel{
    border: 1px solid transparent;

  }
  .healthTrend .rightVisit .panel.panel-default{
    border-top-width: 3px;
    border-color: #cfdbe2;
  }
  .healthTrend .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .healthTrend .fa-phone:before {
    content: "\f095";
  }
  .healthTrend *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .healthTrend .el-date-editor.el-input{
    width:100%!important;
  }
.healthTrend .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
  border-left:none;
  background-color:#fff;
}
.healthTrend .bg-blue{
  background-color: #5c9beb;
  color: #ffffff !important;
}
.healthTrend .bg-red{
  background-color: #ee6654;
  color: #ffffff !important;
}
.healthTrend .bg-green1{
  background-color: #21ca8a;
  color: #ffffff !important;
}
.healthTrend .nav{
  height:0!important;
}
.healthTrend .sleepClass{
  border-bottom:none;
}
.healthTrend .sleepChart{
  margin-top: 45px;
  border-top: 1px solid #ddd;
}
.healthTrend .table-bordered01 > tr > th,
.healthTrend .table-bordered01 > tr > td,
.healthTrend .table-bordered01 > tr > td{
  border-right: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
}
.healthTrend .icon-layers{

}

.healthTrend .personInfo{
  width:85%;
  border-left:20px solid #edf1f2;
  border-top:10px solid #edf1f2;
  border-right:20px solid #edf1f2;
  border-bottom:10px solid #edf1f2;
  margin:auto;
  min-height:150px;
  margin-bottom: 20px;
  overflow: hidden;
}
.healthTrend .infoLeft{
  padding:10px 20px;
  float:left;
  width:85%;
  min-height:150px;
}
.healthTrend .infoRight{
  width:15%;
  min-height:150px;
  float:right;
}
.healthTrend .trapezoid{
  position:relative;
  width: 140px;
  height: 140px;
  float: right;
  border-top: 40px solid #0cb7c6;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  border-bottom: 40px solid transparent;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  margin-right: -70px;
  margin-top: -70px;
}
.healthTrend .station{
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-0deg);
  -ms-transform: rotate(-0deg);
  transform: rotate(179deg);
  margin-top: -40px;
}
.healthTrend .station p{
  white-space: nowrap;
  margin:0;
  color:#fff;
  text-align: center;
}
</style>
